<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="message_tip">
    <div class="_message-tip _fade">
        <img class="_message-img" src="/images/components/message/ic-success.png" alt="">
        <div class="_content" v-html="title"></div>
    </div>
</script>
<script>
	var messageTip = {
		template: "#message_tip",
        props: ["title"],
		ready: function() {
            var self = this;
            setTimeout(function() {
                self.$dispatch("messageTipOver");
            }, 3200);
		},
	}
</script>
<style>
    ._message-tip {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        margin: auto;
        width: 400px;
        padding: 20px 20px;
        line-height: 24px;
        color: #eee;
        text-align: center;
        background: rgba(63, 141, 250, .8);
        z-index: 10;
    }
    ._message-tip ._message-img {
        margin-right: 10px;
        width: 18px;
        vertical-align: text-bottom;
    }
    ._message-tip ._content {
        display: inline-block;
        vertical-align: top;
        max-width: 300px;
        font-size: 18px;
        text-align: left;
        line-height: 18px;
    }
    ._message-tip._fade {
        animation: message_fade 3s;
        animation-fill-mode: forwards;
        -webkit-animation: message_fade 3s;
        -webkit-animation-fill-mode: forwards;
    }
    @keyframes message_fade {
        0% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes message_fade {
        0% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>
